import React, { useState, useEffect, useRef } from 'react'
import './chart.less'
import { Chart } from '@antv/g2'

const Charts = () => {
	const chartRef = useRef()
	const otherRatio = 95.24 / 100 // Other 的占比
	const otherOffsetAngle = otherRatio * Math.PI // other 占的角度的一半
	const data = [
		{ type: '独立任务工时', value: 4.76 },
		{ type: '其他， 800', value: 95.24 },
	]
	const other = [
		{ type: '项目任务工时，已完成，600', value: 71.43 },
		{ type: '项目任务工时，未完成，200', value: 23.81 },
	]
	const [chart, setChart] = useState(null)
	useEffect(() => {
		if (data && !chart) {
			const c = new Chart({
				container: 'c13',
				autoFit: true,
				width: 600,
				height: 300,
			})
			c.legend(false)
			c.tooltip({
				showMarkers: false,
			})
			setChart(c)
		}
	}, [data])

	useEffect(() => {
		chart && renderChart()
	}, [chart, data])

	const renderChart = () => {
		chart.clear()
		chart.data(data)

		chart.annotation().text({
			content: '单位：小时',
			position: ['10%', '10%'],
			style: {
				fontSize: 14,
				fill: '#000',
				textAlign: 'center',
			},
		})

		const view1 = chart.createView({
			region: {
				start: {
					x: 0,
					y: 0,
				},
				end: {
					x: 0.5,
					y: 1,
				},
			},
		})
		view1.coordinate('theta', {
			radius: 0.7,
			startAngle: 0 + otherOffsetAngle,
			endAngle: Math.PI * 2 + otherOffsetAngle,
		})
		view1.data(data)
		view1.interaction('element-highlight')
		view1
			.interval()
			.adjust('stack')
			.position('value')
			.color('type', ['#38c060', '#2593fc'])
			.label('value', function () {
				return {
					offset: -10,
					content: (obj) => {
						return obj.type + '\n' + obj.value + '%'
					},
				}
			})

		const view2 = chart.createView({
			region: {
				start: {
					x: 0.5,
					y: 0.1,
				},
				end: {
					x: 1,
					y: 0.9,
				},
			},
		})

		view2.axis(false)
		view2.data(other)
		view2.interaction('element-highlight')
		view2
			.interval()
			.adjust('stack')
			.position('value')
			.color('type', ['#548235', '#ffc000'])
			.label('value', {
				position: 'right',
				offsetX: -95,
				offsetY: 12,
				style: {
					fill: '#ffffff',
				},
				content: (obj) => {
					const target = obj.type.split('，')
					return target.join(`\n`) + '\n' + obj.value + '%'
				},
			})

		const drawLinkArea = () => {
			const container = chart.backgroundGroup
			const view1_coord = view1.getCoordinate()
			const center = view1_coord.getCenter()
			const radius = view1_coord.getRadius()
			const interval_geom = view2.geometries[0]
			const interval_container = interval_geom.container
			const interval_bbox = interval_container.getBBox()
			const view2_coord = view2.getCoordinate()
			// area points
			const pie_start1 = {
				x: center.x + Math.cos(Math.PI * 2 - otherOffsetAngle) * radius,
				y: center.y + Math.sin(Math.PI * 2 - otherOffsetAngle) * radius,
			}
			const pie_start2 = {
				x: center.x + Math.cos(otherOffsetAngle) * radius,
				y: center.y + Math.sin(otherOffsetAngle) * radius,
			}
			const interval_end1 = {
				x: interval_bbox.minX,
				y: view2_coord.end.y,
			}
			const interval_end2 = {
				x: interval_bbox.minX,
				y: view2_coord.start.y,
			}
			const path = [
				['M', pie_start1.x, pie_start1.y],
				['L', pie_start2.x, pie_start2.y],
				['L', interval_end2.x, interval_end2.y],
				['L', interval_end1.x, interval_end1.y],
				['Z'],
			]
			container.addShape('path', {
				attrs: {
					path,
					stroke: '#d7d7d7',
				},
			})
		}

		chart.render()
		drawLinkArea()
		chart.on('afterpaint', function () {
			drawLinkArea()
		})
		chart.render()
	}

	return (
		<div className={'chart13'}>
			<div id="c13" ref={chartRef} />
		</div>
	)
}

export default Charts
